<template>
    <div class="sliders">
        <div class="logo-box">
            <img :src="logons" alt="" v-if="!toggle">
            <img class="siggle-logo" :src="minLogos"v-else>
        </div>
        <div class="menu">
             <Menu  v-if="!toggle" active-key :active-name="activeName" :open-name="openName">
                <Submenu :name="i" v-for="(item, i) in menuList" :key="i" v-show="!item.unShowSlider">
                    <template slot="title">
                        <Icon type="ios-paper" />
                        {{item.meta.title}}
                    </template>
                    <MenuItem :name="`${i}-${ii}`" v-for="(items, ii) in item.children" :key="`${i}-${ii}`" @click.native="jump(item, items, `${i}-${ii}`)" v-show="!items.noShowList"><div >{{items.meta.title}}</div></MenuItem>
                </Submenu>
                <!-- <Submenu name="3">
                    <template slot="title">
                        <Icon type="ios-stats" />
                        统计分析
                    </template>
                    <!-- <MenuGroup title="使用">
                        <MenuItem name="3-1">新增和启动</MenuItem>
                        <MenuItem name="3-2">活跃分析</MenuItem>
                        <MenuItem name="3-3">时段分析</MenuItem>
                    </MenuGroup>
                    <MenuGroup title="留存">
                        <MenuItem name="3-4">用户留存</MenuItem>
                        <MenuItem name="3-5">流失用户</MenuItem>
                    </MenuGroup> -->
                <!-- </Submenu> -->
            </Menu>
            <drop-slider v-else></drop-slider>
        </div>
    </div>
</template>
<script>
import {menuList} from '@/js/utils'
import dropSlider from './DropSlider'
export default {
    name: 'Slider',
    components: {
        dropSlider
    },
    props: {
        toggle: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            menuList: menuList(),
            logons: require('../../assets/logos.jpg'),
            minLogos: require('@/assets/companyLogo.png')
        }
    },
    computed: {
        activeName () {
            const {menuList} = this
            let str = '', st1= '', st2 = ''
            const {path} = this.$route
            menuList.forEach((r, i) => {
                if (path.indexOf(r.path) != -1) {
                    st1 = i
                }
                if (r.children && r.children.length) {
                    r.children.forEach((rr, ii) => {
                        if (path.indexOf(`${r.path}/${rr.path}`) != -1 || ( rr.path == '' && path.indexOf(`${r.path}`) != -1)) {
                            st2 = ii
                        }
                        if (!rr.noShowList && path.indexOf(`${r.path}`) != -1) {
                            st2 = 0
                        }
                    })
                }
            })
            str = `${st1}-${st2}`
            return str
        },
        openName () {
             return [`${this.activeName.split('-')[0]}`]
        }
    },
    created () {
    },
    methods: {
        jump (item, items) {
            if (this.$route.fullPath == `/${item.path}/${items.path}`) return

            items.path ? this.$router.push(`/${item.path}/${items.path}`) : this.$router.push(`/${item.path}`)
        }
    }
}
</script>
<style scoped lang="less">
.sliders {
    .logo-box {
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        padding-top: 10px;
        img {
            display: inline-block;
            width: 94px;
            height: 40px;
            &.siggle-logo {
                width: 40px;
            }
        }
    }
    .menu {
        width: 100%;
        background: #003E6B;
        height: calc(100% - 60px);
        overflow-y: scroll;
        .ivu-menu {
            background: transparent;
            width: 100% !important;
            
        }

    }
}
/deep/ .ivu-menu-submenu {
                .ivu-menu-submenu-title {
                    width: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: #fff;
                }
                .ivu-menu {
                    color: #fff;
                    .ivu-menu-item {
                        padding: 8px 24px;
                        margin-bottom: 10px;
                        &.ivu-menu-item-active {
                            background: #1298FC;
                            color: #fff;
                            font-weight: bold;
                        }
                    }
                }
        }
</style>